<template>
	<Modal class="select-box" v-model="flag" title="选择部门" :width="1200" :mask-closable="false">
		<Row :gutter="8">
			<Col :lg="12">
				<Card dis-hover>
					<p slot="title">可选项</p>
					<div class="search">
						<Input search v-model="searchKey" placeholder="搜索部门" />
					</div>
					<div class="date-route">
						<nav class="breadcrumb">
							<ul>
								<li><a>顶层</a></li>
								<li><a href="#">软通动力信息技术（集团）股份有限公司</a></li>
								<li><a href="#">软通WeLink用户支持</a></li>
							</ul>
						</nav>
					</div>
					<div>
						<CheckboxGroup v-model="selected">
							<checkbox v-for="item in canSelectList" :label="item.OrgNo" :key="item.OrgNo">
								<span class="label">{{ item.OrgName }}</span>
								<Icon type="md-apps" @click.prevent="clickSub(item.OrgNo)" />
							</checkbox>
						</CheckboxGroup>
					</div>
				</Card>
			</Col>
			<Col :lg="12">
				<Card dis-hover>
					<p slot="title">已选项</p>
					<div class="selected-content">
						<div class="selected-item" v-for="item in selectList" :key="item.OrgNo">
							<p>{{ item.OrgName }}</p>
							<Icon type="md-close" @click.prevent="cancelSelect(item.OrgNo)" />
						</div>
					</div>
				</Card>
			</Col>
		</Row>
	</Modal>
</template>
<script>
export default {
	name: 'SelectBox',
	props: {
		checkedList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			flag: true,
			searchKey: '',
			canSelectList: [],
			selected: [],
			selectList: [],
			deptRoutes: [],
			dataList: []
		}
	},
	methods: {
		clickSub(deptNo) {
			const item = this.dataList.find((el) => {
				return el.OrgNo === deptNo
			})
			const subList = this.dataList.find((el) => {
				return el.ParentNo === deptNo
			})
			this.canSelectList = subList
			this.deptRoutes.push(...item)
		},
		cancelSelect(deptNo) {
			let index = this.selected.findIndex((item) => {
				return item === deptNo
			})
			this.selected.splice(index, 1)
			index = this.selectList.findIndex((item) => {
				return item.OrgNo === deptNo
			})
			this.selectList.splice(index, 1)
		},
		init(data) {
			this.dataList = Object.freeze(data)
			this.canSelectList = this.dataList.filter((item) => {
				return item.ParentNo === ''
			})
			this.selected = [...this.checkedList]
			this.selectList = this.dataList.filter((item) => {
				return this.selected.includes(item.OrgNo)
			})
		},
		getChecked() {
			return [...this.selectList]
		}
	}
}
</script>
<style scoped>
.select-box {
	position: relative;
	display: inline-block;
}

.select-box .ivu-checkbox-group {
	height: 410px;
	overflow-y: auto;
}

.select-box .ivu-checkbox-wrapper {
	display: flex;
	align-items: center;
	padding: 6px 12px;
}

.select-box .ivu-checkbox-wrapper:hover {
	background-color: #f5f7fa;
}

.select-box .ivu-checkbox-wrapper .ivu-checkbox {
	margin-right: 6px;
	display: flex;
	align-items: center;
}

.select-box .ivu-checkbox-wrapper .ivu-checkbox-inner {
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.select-box .ivu-checkbox-wrapper .ivu-checkbox-input {
	display: none;
}

.select-box .ivu-checkbox-wrapper .label {
	margin: 0;
	font-size: 14px;
	color: #333;
	margin-left: 10px;
}

.select-box .ivu-checkbox-wrapper i {
	font-size: 16px;
	color: #999;
	margin-left: auto;
}

.select-box .ivu-checkbox-wrapper:hover .label,
.select-box .ivu-checkbox-wrapper:hover i {
	color: #409eff;
}

.select-box .ivu-checkbox-wrapper .ivu-checkbox-checked .ivu-checkbox-inner::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin: 2px;
	background-color: #409eff;
	border-radius: 1px;
}

/* 滚动条样式 */
.select-box .ivu-checkbox-group::-webkit-scrollbar {
	width: 6px;
	background-color: #f5f7fa;
}

.select-box .ivu-checkbox-group::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	background-color: #c0c4cc;
}

.select-box .ivu-checkbox-group::-webkit-scrollbar-thumb:hover {
	background-color: #a8acb8;
}

.select-box .selected-content {
	display: flex;
	flex-wrap: wrap;
	height: 480px;
	align-content: flex-start;
	overflow-y: auto;
}

.select-box .selected-item {
	background-color: #f5f5f5;
	color: #333;
	border-radius: 4px;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	height: 48px;
	width: 100%;
	margin-bottom: 5px; /* Reduce the margin between rows */
}

.select-box .selected-item:first-of-type {
	flex-grow: 0; /* Prevent first item from growing */
}

.select-box .selected-item p {
	margin: 0;
	margin-right: 5px;
}

.select-box .selected-item .ivu-icon {
	color: #999;
	font-size: 18px;
	cursor: pointer;
}
.select-box .breadcrumb {
	margin: 10px 0;
}

.select-box .breadcrumb ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.select-box .breadcrumb li {
	font-size: 14px;
}

.select-box .breadcrumb li:not(:last-child)::after {
	content: '>';
	padding: 0 10px;
	color: #999;
}

.select-box .breadcrumb a {
	color: #999;
	text-decoration: none;
}

.select-box .breadcrumb a:hover {
	color: #409eff;
}
</style>
